/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Navigator,
    Text,
    View,
    Animated
} from 'react-native';

if (!__DEV__) {
    global.console = {
        info: () => {},
        log: () => {},
        warn: () => {},
        error: () => {},
    };
}

import { observer } from 'mobx-react/native';
import FooterNav from './components/footerNav';
import IndexPage from './pages/index';
import UserCenter from './pages/userCenter';
import PostArticle from './pages/postArticle';
import Loading from './pages/loading';
import DefaultInfo from './data/defaultInfo';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Uri from './data/api';
@observer
export default class Blog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabTexts: ['首页', '', '我的'],
            tabIconNames: ['home', 'circle-thin', 'user'],
            articles: [],
            loadDone: false,
            fadeAnim: new Animated.Value(1)
        };
    }
    componentDidMount() {
        let articles;
        fetch(`${Uri.host}/getArticles?p=1`)
            .then((response) => {
                if (response.ok) {
                    return response.json();
                }
            })
            .then((res) => {
                articles = res.articles;
                return fetch(`${Uri.host}/checkLogin`)
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                }
            })
            .then(res => {
                console.log(res.user);
                Animated.timing(          // Uses easing functions
                    this.state.fadeAnim,    // The value to drive
                    {toValue: 0, duration: 1000}            // Configuration
                ).start();
                setTimeout(() => {
                    this.setState({
                        articles: articles,
                        userInfo: res.login ? res.user : null,
                        login: res.login,
                        loadDone: true
                    });
                    DefaultInfo.updateUser(res.user);
                    DefaultInfo.updateArticle(articles);
                }, 1000);
            })
            .catch((error) => {
                console.error(error);
            });
    }
    render() {
        if (this.state.loadDone) {
            return <ScrollableTabView
                renderTabBar={() => <FooterNav
                    tabTexts={this.state.tabTexts} tabIconNames={this.state.tabIconNames} />}
                initialPage={0}
                ref={(tabView) => {
                    DefaultInfo.setTabView(tabView);

                }}
                tabBarPosition="bottom"
                locked={true}
                tabBarUnderlineStyle={{backgroundColor: 'transparent'}}
            >
                <IndexPage articles={this.state.articles} tabLabel='home-page'/>
                <PostArticle tabLabel='post-page'/>
                <UserCenter login={this.state.login} userInfo={this.state.userInfo} tabLabel='user-center-page' />
            </ScrollableTabView>;
        } else {
            return <Animated.View style={{opacity: this.state.fadeAnim, flex:1}}>
                <Loading/>
            </Animated.View>
        }
    }
}
AppRegistry.registerComponent('myApp', () => Blog);
